<template lang="html">
  <div class="example-wrapper">
    <div class="arrow-example -hidden">
      <div class="dot -center"></div>
      <div class="dot -center"></div>
      <div class="dot -center"></div>
      <div class="dot -center"></div>
      <div class="dot -center"></div>
      <div class="dot -center"></div>
      <div class="dot -left-1"></div>
      <div class="dot -left-2"></div>
      <div class="dot -right-1"></div>
      <div class="dot -right-2"></div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    init() {
      let arrow = document.querySelector('.arrow-example')
      setInterval(() => {
        arrow.classList.toggle('-hidden')
      }, 1000)
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
  $arrow-height: 150px;
  $arrow-width: calc(#{$arrow-height} * 5 / 6);
  $dot-size: calc(#{$arrow-height} / 6);

  *, div {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  .example-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #EDF7F6;
  }
  .arrow-example {
    position: relative;
    height: $arrow-height;
    width: $arrow-width;
    will-change: opacity transform;
    transition: all .3s cubic-bezier(.43, .27, .36, .83);

    > .dot {
      position: absolute;
      bottom: 0;
      left: calc(#{$dot-size} * 2);
      height: $dot-size;
      width: $dot-size;
      will-change: transform;
      transition: transform .3s cubic-bezier(.43, .27, .36, .83);

      &:after {
        content: '';
        position: absolute;
        top: 20%;
        left: 20%;
        display: block;
        height: 60%;
        width: 60%;
        background: #2660A4;
      }

      &.-center {
        &:nth-of-type(1) {
          bottom: calc(#{$dot-size} * 0);
        }
        &:nth-of-type(2) {
          bottom: calc(#{$dot-size} * 1);
        }
        &:nth-of-type(3) {
          bottom: calc(#{$dot-size} * 2);
        }
        &:nth-of-type(4) {
          bottom: calc(#{$dot-size} * 3);
        }
        &:nth-of-type(5) {
          bottom: calc(#{$dot-size} * 4);
        }
        &:nth-of-type(6) {
          bottom: calc(#{$dot-size} * 5);
        }
      }
      &.-left-1 {
        bottom: calc(#{$dot-size} * 1);
        left: calc(#{$dot-size} * 1);
      }
      &.-left-2 {
        bottom: calc(#{$dot-size} * 2);
        left: 0;
      }
      &.-right-1 {
        bottom: calc(#{$dot-size} * 1);
        left: calc(#{$dot-size} * 3);
      }
      &.-right-2 {
        bottom: calc(#{$dot-size} * 2);
        left: calc(#{$dot-size} * 4);
      }
    }
    &.-hidden {
      opacity: 0;
      transform: translateY(calc(#{$dot-size} * -2));
      & > .dot {
        &:nth-of-type(1) {
          transform:
            translateX(calc(#{$dot-size} * 1))
            translateY(calc(#{$dot-size} * 1));
        }
        &:nth-of-type(2) {
          transform:
            translateX(calc(#{$dot-size} * -1))
            translateY(calc(#{$dot-size} * -3));
        }
        &:nth-of-type(3) {
          transform:
            translateX(calc(#{$dot-size} * -2))
            translateY(calc(#{$dot-size} * 1));
        }
        &:nth-of-type(4) {
          transform:
            translateX(calc(#{$dot-size} * 2))
            translateY(calc(#{$dot-size} * -3));
        }
        &:nth-of-type(5) {
          transform:
            translateX(calc(#{$dot-size} * -2))
            translateY(calc(#{$dot-size} * -3));
        }
        &:nth-of-type(6) {
          transform:
            translateX(calc(#{$dot-size} * 3))
            translateY(calc(#{$dot-size} * 1));
        }
        &:nth-of-type(7) {
          transform:
            translateX(calc(#{$dot-size} * -2))
            translateY(calc(#{$dot-size} * -2));
        }
        &:nth-of-type(8) {
          transform:
            translateX(calc(#{$dot-size} * 2))
            translateY(calc(#{$dot-size} * -1));
        }
      }
    }
  }
</style>
